<template>
  <div class="article-classify">
    <el-card shadow="never">
      <template #header>
        <div class="header">
          <span>文章分类</span>
          <el-button @click="openDialog('add')" size="small" type="primary">添加分类</el-button>
        </div>
      </template>
      <el-table ref="table" :data="list" border style="width: 100%">
        <el-table-column prop="id" label="序号" width="200">
        </el-table-column>
        <el-table-column prop="cate_name" label="项目名称" >
        </el-table-column>
        <el-table-column prop="cate_alias" label="分类别名"></el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="obj">
            <el-button @click="openDialog('edit', obj.row.id)" type="primary">修改</el-button>
            <el-button @click="del(obj.row.id)" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 弹出层 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="410px">
      <el-form ref="form" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="分类名称" prop="cate_name">
          <el-input v-model="form.cate_name" autocomplete="off" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="分类别名" prop="cate_alias">
          <el-input v-model="form.cate_alias" autocomplete="off" placeholder="请输入别名"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submit">{{btnName}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getCateList, addCate, getCateInfo, updateCate, delCate } from '@/api/cate'
export default {
  name: 'article-classify-page',
  data () {
    return {
      list: [],
      dialogFormVisible: false,
      dialogType: 'add',
      btnName: '添加',
      form: {
        cate_name: '',
        cate_alias: ''
      },
      rules: {
        cate_name: [
          { required: true, message: '请输入名称', trigger: ['blur', 'change'] },
          { min: 1, max: 10, message: '请输入1~10个字符', trigger: ['blur', 'change'] }
        ],
        cate_alias: [
          { required: true, message: '请输入别名', trigger: ['blur', 'change'] },
          { pattern: /^\w{1,15}$/, message: '请输入1~10个字母或数字', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  computed: {
    dialogTitle () {
      let title = '标题'
      if (this.dialogType === 'add') title = '添加分类'
      if (this.dialogType === 'edit') title = '修改文章分类'
      return title
    }
  },
  async created () {
    this.initData()
  },
  methods: {
    async openDialog (type, id) {
      this.dialogType = type
      this.dialogFormVisible = true
      if (type === 'edit') {
        this.btnName = '确认修改'
        const res = await getCateInfo(id)
        this.form = {
          ...res.data
        }
      } else {
        // this.$refs.form.resetFields()
        this.btnName = '添加'
      }
    },
    async initData () {
      const { data } = await getCateList(this.form)
      this.list = data
    },
    async del (id) {
      this.$confirm('确定要删除本条信息吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delCate(id)
        this.$message.success('删除成功')
        this.initData()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async submit () {
      try {
        if (this.dialogType === 'add') {
          await addCate(this.form)
          this.$message.success('添加成功')
        }
        if (this.dialogType === 'edit') {
          const { id, cate_name, cate_alias } = this.form
          await updateCate({ id, cate_name, cate_alias })
          this.$message.success('修改成功')
        }
        this.initData()
        this.dialogFormVisible = false
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-card {
  margin-top: 25px;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 16px;
    span {
      font-size: 16px;
      color: #131523;
      font-weight: 500;
    }
  }
}
</style>
